<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        /* div+p{
            color: red;
        } */

        /* ~ 通用兄弟选择器 同一级后面的所有都会被选择到 */
        div~p {
            color: blue;
        }

        /* :link 未访问的状态 */
        a:link {
            color: black;
        }

        /* :visited 已访问的状态 */
        a:visited {
            color: yellowgreen;
        }

        /* pointer 手 */
        /* help ? */
        /* zoom-in 放大镜 */
        /* not-allow 不可用 */
        /* hover 鼠标悬停 */
        a:hover {
            color: aqua;
            cursor: pointer;
        }

        /* 激活选定状态 点击未释放时 */
        a:active {
            color: brown;
        }
        /* 只要元素被设置成 diabled 就会被选中 */
        input:disabled {
            color: aquamarine;
            background-color: blue;
        }
        /* 元素没有被禁用就会被选中 */
        input:enabled {
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div>第一个</div>
    <p>第二个</p>
    <div>
        <p>第三个</p>
    </div>
    <a href="https://www.kaifamiao.com">点击一下有惊喜</a><br />
    <input type="text" disabled value="这是一个禁用的">
    <input type="text" value="">

    

</body>

</html>